<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Slide Demo - Fixed Drawer</title>
        <style type="text/css" media="screen">
        <!--
/*************************************/
/* Blueprint: reset.css              */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

/* Remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/*************************************/
/*  Demo Styles                      */
    .capt,
    .capb {
        background: url("images/caps.gif") no-repeat;
        height:4px;
        width:100%;
        /*position:absolute;*/
        z-index:100;
        margin:0px;
        padding:0px;
    }
    .capt {
        position:absolute;
        background-position:0 -4px;
    }
    .capb {
        margin-top:-19px;
    }
    #content {
        float:left;
    }
    .drawers-wrapper {
        position: relative;
        width: 188px;
        float:left;
        margin:10px;
    }
        .drawers {
            margin-bottom:15px;
            color:#76797C;
            font-size:11px;
            line-height: 18px;
        }
            .drawer {
                background:transparent url(images/sideboxlight_bg.gif) repeat-y scroll 0pt;
                color:#76797C;
                font-size:11px;
                line-height:1.3em;
            }
                .drawer-handle {
                    background:#939393 url(images/slider_handlebg.png) no-repeat scroll 0pt;
                    color:#333333;
                    cursor:default;
                    height:25px;
                    line-height:25px;
                    text-indent:15px;
                    font-size:12px;
                    width:100%;
                }
                    .drawer-handle.open {
                        background-color:#72839D;
                        background-position:-188px 0pt;
                        color:#FFFFFF;
                    }

                /* nasty, but it fixes the indent on the first one. */
                    h2.drawer-handle span {
                        
                    }
                .drawer ul {
                    padding: 0 12px;
                    padding-bottom:0pt;
                }
                .drawer li {
                    border-bottom:1px solid #E5E5E5;
                    line-height:16px;
                    padding:6px 0pt;
                }
                    .drawer-content ul {
                        padding-top: 7px;
                    }
                    .drawer-content li a {
                        display:block;
                        overflow:hidden;
                    }
                    .alldownloads li {
                        border:0pt none;
                        line-height:18px;
                        padding:0pt;
                    }

            .drawers a {
                color:#666666;
                text-decoration:none;
                font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;
            }
        -->
        </style>

	<script type="text/javascript" src="../../../jquery-1.2.6.js"></script>

	<script type="text/javascript" src="../../../ui/ui.core.js"></script>
	<script type="text/javascript" src="../../../ui/ui.accordion.js"></script>


    <script type="text/javascript">
    <!--
    $(function () {
        $('ul.drawers').accordion({
            header: 'h2.drawer-handle',
            selectedClass: 'open',
            event: 'mouseover'
        });
    });
    //-->
    </script>
</head>
<body id="page">
    <div id="content">
        <h1>Fixed drawer slide out demo (using accordion plugin)</h1>
        <p>This example demonstrates the Apple downloads slider/accordion effect using the jQuery Accordion plugin.</p>
        <p>Mouse over the headings to reveal the list of available links.</p>

        <p>
            <a href="http://jqueryfordesigners.com/slide-out-and-drawer-effect/">Read the article this demonstration relates to</a>
        </p>
    </div>
    <div class="drawers-wrapper">
        <ul class="drawers">
            <li class="drawer">
                <h2 class="drawer-handle open">
                    <div class="capt"></div>
                    <span>Downloads</span>
                </h2>
                <ul class="alldownloads">
                    <li id="sn-downloadsmacosx"><a href="/downloads/macosx/">All Categories</a></li>
                    <li id="sn-aperture"><a href="/downloads/macosx/aperture/">Aperture</a></li>
                    <li id="sn-apple"><a href="/downloads/macosx/apple/">Apple</a></li>
                    <li id="sn-audio"><a href="/downloads/macosx/audio/">Audio</a></li>
                    <li id="sn-automator"><a href="/downloads/macosx/automator/">Automator Actions</a></li>
                    <li id="sn-businessfinance"><a href="/downloads/macosx/business_finance/">Business &amp; Finance</a></li>
                    <li id="sn-calendars"><a href="/downloads/macosx/calendars/">Calendars</a></li>
                    <li id="sn-developmenttools"><a href="/downloads/macosx/development_tools/">Development Tools</a></li>
                    <li id="sn-drivers"><a href="/downloads/macosx/drivers/">Drivers</a></li>
                    <li id="sn-emailchat"><a href="/downloads/macosx/email_chat/">Email &amp; Chat</a></li>
                    <li id="sn-finalcutstudio"><a href="/downloads/macosx/finalcutstudio/">Final Cut Studio</a></li>
                    <li id="sn-games"><a href="/downloads/macosx/games/">Games</a></li>
                    <li id="sn-homelearning"><a href="/downloads/macosx/home_learning/">Home &amp; Learning</a></li>
                    <li id="sn-iconsscreensavers"><a href="/downloads/macosx/icons_screensavers/">Icons, Screensavers, etc.</a></li>
                    <li id="sn-imaging3d"><a href="/downloads/macosx/imaging_3d/">Imaging &amp; 3D</a></li>
                    <li id="sn-internetutilities"><a href="/downloads/macosx/internet_utilities/">Internet Utilities</a></li>
                    <li id="sn-ipoditunes"><a href="/downloads/macosx/ipod_itunes/">iPod + iTunes</a></li>
                    <li id="sn-mathscience"><a href="/downloads/macosx/math_science/">Math &amp; Science</a></li>
                    <li id="sn-networkingsecurity"><a href="/downloads/macosx/networking_security/">Networking &amp; Security</a></li>
                    <li id="sn-productivitytools"><a href="/downloads/macosx/productivity_tools/">Productivity Tools</a></li>
                    <li id="sn-spotlight"><a href="/downloads/macosx/spotlight/">Spotlight Plugins</a></li>
                    <li id="sn-systemdiskutilities"><a href="/downloads/macosx/system_disk_utilities/">System/Disk Utilities</a></li>
                    <li id="sn-unixopensource"><a href="/downloads/macosx/unix_open_source/">UNIX &amp; Open Source</a></li>
                    <li id="sn-video"><a href="/downloads/macosx/video/">Video</a></li>
                    <li id="sn-dashboard"><a href="/downloads/dashboard/" class="bottom">Widgets</a></li>
                </ul>
            </li>
            <li class="drawer">
                <h2 class="drawer-handle">Top Downloads</h2>
                <ul>
                    <li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
                    <li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>
                    <li><a title="Safari 3 Public Beta" href="http://www.apple.com/safari/download/">3. Safari 3 Public Beta</a></li>
                    <li><a title="MacPool" href="/downloads/macosx/games/simulation_and_sports/macpool.html">4. MacPool Realistic and easy to play computer simu…</a></li>
                    <li><a title="Guitar Hero III: Legends of Rock" href="/downloads/macosx/games/demos_updates/guitarheroiiilegendsofrock.html">5. Guitar Hero III: L…</a></li>
                    <li><a title="Messenger for Mac" href="/downloads/macosx/email_chat/messengerformac.html">6. Messenger for Mac</a></li>
                    <li><a title="Google Earth" href="/downloads/macosx/home_learning/googleearth.html">7. Google Earth</a></li>
                    <li><a title="Monopoly" href="/downloads/macosx/games/cards_puzzle/monopoly.html">8. Monopoly</a></li>
                    <li><a title="Litho System Icons" href="/downloads/macosx/icons_screensavers/lithosystemicons.html">9. Litho System Icons</a></li>
                    <li><a title="Battlefield 2142" href="/downloads/macosx/games/demos_updates/battlefield2142.html">10. Battlefield 2142</a></li>
                    <li><a title="More iChat Effects" href="/downloads/macosx/email_chat/moreichateffects.html">11. More iChat Effects</a></li>
                    <li><a title="Dragster" href="/downloads/macosx/internet_utilities/dragster.html">12. Dragster</a></li>
                    <li><a title="iSquint" href="/downloads/macosx/ipod_itunes/isquint.html">13. iSquint</a></li>
                    <li class="last"><a title="US Holiday Calendar" href="/downloads/macosx/calendars/usholidaycalendar.html">14. US Holiday Calendar</a></li>
                </ul>
            </li>
            <li class="drawer last">
                <h2 class="drawer-handle">Top Apple Downloads</h2>
                <ul>
                    <li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
                    <li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>
                    <li><a title="Safari 3 Public Beta" href="http://www.apple.com/safari/download/">3. Safari 3 Public Beta</a></li>
                    <li><a title="Mac OS X 10.5.1 Update" href="/downloads/macosx/apple/macosx_updates/macosx1051update.html">4. Mac OS X 10.5.1 Up…</a></li>
                    <li><a title="Java for Mac OS X 10.4 Release 5" href="/downloads/macosx/apple/macosx_updates/javaformacosx104release5.html">5. Java for Mac OS X …</a></li>
                    <li><a title="iPod Reset Utility 1.0.2 for Windows" href="/downloads/macosx/apple/ipod_itunes/ipodresetutility102forwindows.html">6. iPod Reset Utility…</a></li>
                    <li><a title="iPhoto 7.1.1" href="/downloads/macosx/apple/application_updates/iphoto711.html">7. iPhoto 7.1.1</a></li>
                    <li><a title="Bonjour for Windows" href="/downloads/macosx/apple/windows/bonjourforwindows.html">8. Bonjour for Windows</a></li>
                    <li><a title="Mac OS X 10.4.11 Combo Update (PPC)" href="/downloads/macosx/apple/macosx_updates/macosx10411comboupdateppc.html">9. Mac OS X 10.4.11 C…<br/>The 10.4.11 Update is recommended for al…</a></li>
                    <li><a title="Java for Mac OS X 10.4, Release 6" href="/downloads/macosx/apple/macosx_updates/javaformacosx104release6.html">10. Java for Mac OS X …</a></li>
                    <li><a title="GarageBand 4.1.1" href="/downloads/macosx/apple/application_updates/garageband411.html">11. GarageBand 4.1.1</a></li>
                    <li><a title="iPod Updater 2006-06-28 for Windows" href="/downloads/macosx/apple/ipod_itunes/ipodupdater20060628forwindows.html">12. iPod Updater 2006-…</a></li>
                    <li><a title="Security Update 2007-009 1.1 (10.4.11 Universal)" href="/downloads/macosx/apple/security_updates/securityupdate20070091110411universal.html">13. Security Update 20…</a></li>
                    <li class="last"><a title="Security Update 2007-009 1.1 (10.5.1)" href="/downloads/macosx/apple/security_updates/securityupdate2007009111051.html">14. Security Update 20…</a></li>
                </ul>
            </li>
        </ul>
        <div class="capb"></div>
    </div>
</body>
</html>
